import { customRef } from "vue";

export function debounceRef(value, delay = 1000) {
  let timer;
  return customRef((track, trigger) => {
    return {
      get() {
        //依赖收集 track()
        track()
        return value
      },
      set(val) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          //派发更新 trigger()
          value = val
          trigger()
        }, delay)
      }
    }
  })
}

export function debounce(func, delay = 1000) {
  // debounce调用一次 返回一个防抖函数 timer保留在这个作用域内。之后都是返回的函数被多次调用 实现防抖
  console.log('触发debounce初始化');
  let timer
  // 把 调用返回的函数 的参数 喂给func
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => {
      // this指向调用返回函数的vue实例
      console.log(this.text, timer, '看看');
      // 暂时不理解为func什么要绑定vue实例
      // func是个完整的函数传了进来，给args就有固定的产出，除非func内部用了vue实例里的变量，且是选项式api的写法时，才需要call
      // func.call(this, ...args)
      func(...args)
    }, delay)
  }
}

// export function debounce(func, delay = 1000) {
//   let timer
//   return function (...args) {
//     clearTimeout(timer)
//     timer = setTimeout(() => {
//       func.call(this, ...args)
//     }, delay)
//   }
// }

export function throttle(func, delay = 1000) {
  let timer
  return function (...args) {
    if (timer) return
    timer = setTimeout(() => {
      func.call(this, ...args)
      timer = null
    }, delay);
  }
}

export function testCall(func) {
  // 可以理解为，把下面返回的函数放到代码执行的位置处，执行的位置this指向谁就是谁
  return function (...args) {
    console.log(this, '指向的this');
    // 没有执行func 现在func是个废物
    // func.call(this, ...args)//this指向运行testCall时的上下文
  }
}